<template>
<div class="message-content message-box-shadow" v-show="hasReply">
      <el-scrollbar>
        <div class="message-content message-content__inner" >
      <div class="interaction-item" 
      v-for="item in replyMessageList" 
      :key="item.commentId"
      @mouseenter="showDeleteIndex=item.commentId" 
      @mouseleave="showDeleteIndex=-1">
        <div class="interaction-item__left single">
          <el-avatar :size="46" :src="item.publisherAvatar"></el-avatar>
        </div>
        <div class="interaction-item__right">
          <div class="interaction-item__content">
            <div class="interaction-item__title">
              <span class="interaction-item__uname">{{item.publisherNickname }}</span>
              <span class="interaction-item__action" v-if="item.parentCommentId!=-1">回复了我的评论</span>
              <span class="interaction-item__action" v-else>对我的视频发表了评论</span>
             </div>
             <div class="interaction-item__msg bili-ellipsis">
               {{ item.content }}  
             </div>
             <div class="interaction-item__metadata">
              <div class="interaction-item__time">{{ handleTimeShow(item.publishTime) }}</div>
              <div class="interaction-item__btn reply"  @click="toggleReplyPanel(item.commentId)">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" width="16" height="16" style="width: 16px; height: 16px;"><path d="M1.3333333333333333 7C1.3333333333333333 4.05448 3.7211466666666664 1.6666666666666665 6.666666666666666 1.6666666666666665L9.333333333333332 1.6666666666666665C12.278833333333333 1.6666666666666665 14.666666666666666 4.05448 14.666666666666666 7C14.666666666666666 9.843699999999998 12.440933333333334 12.167499999999999 9.636533333333333 12.324333333333332C8.998166666666666 13.1427 7.948533333333334 14.1686 6.474246666666667 14.570333333333332C6.1891333333333325 14.648 5.92802 14.526299999999999 5.782006666666666 14.338366666666666C5.6404266666666665 14.156166666666666 5.59028 13.894933333333334 5.695926666666666 13.651666666666666C5.9177133333333325 13.141033333333333 5.963839999999999 12.672799999999999 5.933633333333333 12.281633333333334C3.3350933333333335 11.9255 1.3333333333333333 9.696666666666665 1.3333333333333333 7zM6.666666666666666 2.6666666666666665C4.273433333333333 2.6666666666666665 2.333333333333333 4.606766666666666 2.333333333333333 7C2.333333333333333 9.306033333333332 4.134893333333333 11.191666666666666 6.407 11.3257C6.633393333333332 11.339066666666668 6.822433333333334 11.5031 6.867533333333332 11.725366666666666C6.9593 12.177299999999999 6.987066666666667 12.741999999999999 6.825866666666666 13.367066666666666C7.792633333333333 12.938366666666667 8.513233333333332 12.171699999999998 8.978566666666666 11.537333333333333C9.071733333333333 11.410333333333334 9.219333333333333 11.334666666666665 9.376833333333334 11.333133333333333C11.749966666666666 11.309833333333332 13.666666666666666 9.378699999999998 13.666666666666666 7C13.666666666666666 4.606766666666666 11.726566666666665 2.6666666666666665 9.333333333333332 2.6666666666666665L6.666666666666666 2.6666666666666665z" fill="currentColor"></path></svg> 
                <span>回复</span>
              </div>
              <div class="interaction-item__btn " @click="likeReplyMe(item)">
                <div v-show="!item.isLiked" class="like-container">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" width="16" height="16" style="width: 16px; height: 16px;"><path d="M9.283433333333333 1.6969733333333332C9.095466666666667 1.6750599999999998 8.921333333333333 1.7568066666666664 8.828166666666666 1.8657866666666667C8.424633333333333 2.3377999999999997 8.332133333333333 3.031613333333333 8.029333333333334 3.5679133333333333C7.630633333333333 4.27412 7.258833333333333 4.701153333333333 6.800866666666666 5.102673333333334C6.42382 5.43324 6.042199999999999 5.654626666666666 5.666666666666666 5.757786666666666L5.666666666666666 12.816366666666667C6.19062 12.827766666666665 6.751966666666666 12.835 7.333333333333333 12.835C8.831233333333333 12.835 10.1019 12.787433333333333 10.958166666666665 12.743366666666667C11.565133333333332 12.7121 12.091966666666666 12.411766666666667 12.366466666666668 11.9234C12.7516 11.238266666666664 13.2264 10.233566666666666 13.514166666666664 9.050166666666666C13.7823 7.947466666666667 13.904599999999999 7.041 13.959466666666666 6.40168C13.984933333333332 6.105313333333333 13.750433333333334 5.833353333333333 13.386666666666665 5.833353333333333L10.065133333333332 5.833353333333333C9.898433333333333 5.833353333333333 9.742666666666667 5.750286666666666 9.649833333333333 5.611833333333333C9.536066666666667 5.442159999999999 9.560033333333333 5.2495199999999995 9.6312 5.070013333333333C9.783966666666666 4.680513333333333 9.983933333333333 4.0995133333333325 10.062766666666667 3.571206666666667C10.1406 3.0496733333333332 10.121599999999999 2.6306133333333332 9.917133333333332 2.2429266666666665C9.697399999999998 1.8263599999999998 9.448266666666665 1.7161933333333332 9.283433333333333 1.6969733333333332zM10.773433333333333 4.833353333333333L13.386666666666665 4.833353333333333C14.269133333333333 4.833353333333333 15.036999999999999 5.54194 14.9558 6.487253333333333C14.897 7.1722 14.767199999999999 8.1294 14.485833333333334 9.286466666666666C14.170333333333334 10.583866666666665 13.6532 11.675133333333331 13.238166666666666 12.413433333333332C12.7729 13.2411 11.910266666666667 13.695666666666668 11.009566666666666 13.742033333333334C10.14 13.786833333333334 8.851766666666666 13.835 7.333333333333333 13.835C5.862206666666666 13.835 4.51776 13.789766666666667 3.565173333333333 13.7463C2.4932333333333334 13.697399999999998 1.5939999999999999 12.901133333333334 1.4786599999999999 11.810133333333333C1.4028 11.092733333333332 1.3333333333333333 10.164466666666666 1.3333333333333333 9.168333333333333C1.3333333333333333 8.255633333333332 1.3916466666666667 7.427899999999999 1.4598999999999998 6.771133333333333C1.5791666666666666 5.6236266666666666 2.5641 4.833353333333333 3.671693333333333 4.833353333333333L5.166666666666666 4.833353333333333C5.3793066666666665 4.833353333333333 5.709213333333333 4.729853333333333 6.141613333333333 4.350746666666666C6.516733333333333 4.02186 6.816366666666667 3.6823333333333332 7.158533333333333 3.0762799999999997C7.5023 2.4673999999999996 7.6041 1.7586733333333333 8.068066666666667 1.2159866666666665C8.372133333333332 0.8603133333333333 8.8718 0.6422 9.399233333333333 0.7037066666666667C9.949866666666665 0.7679066666666667 10.457733333333334 1.1244533333333333 10.801633333333331 1.7763799999999998C11.148866666666665 2.43466 11.143799999999999 3.1023266666666665 11.051833333333335 3.71876C10.993899999999998 4.106886666666666 10.875366666666666 4.519026666666666 10.773433333333333 4.833353333333333zM4.666666666666666 12.788833333333333L4.666666666666666 5.833353333333333L3.671693333333333 5.833353333333333C3.029613333333333 5.833353333333333 2.5161533333333335 6.281713333333333 2.4545466666666664 6.874499999999999C2.3890599999999997 7.5046 2.333333333333333 8.2971 2.333333333333333 9.168333333333333C2.333333333333333 10.120099999999999 2.399833333333333 11.011933333333333 2.473113333333333 11.705C2.533993333333333 12.2808 3.0083466666666667 12.719866666666665 3.6107466666666665 12.747366666666666C3.9228066666666668 12.761566666666667 4.278173333333333 12.776 4.666666666666666 12.788833333333333z" fill="currentColor"></path></svg>
                  <span>点赞</span>
                </div>
                <div v-show="item.isLiked" class="like-container active">
                  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" width="16" height="16" style="width: 16px; height: 16px;"><path d="M13.545733333333333 5.166653333333333L10.511766666666666 5.166653333333333C10.658033333333332 4.851813333333333 10.821733333333334 4.440706666666666 10.880833333333332 4.044453333333333C10.923233333333332 3.760413333333333 10.927266666666664 3.412493333333333 10.893133333333333 3.0813333333333333C10.859833333333334 2.7581999999999995 10.784866666666666 2.3969066666666663 10.6352 2.1132133333333334C10.318299999999999 1.5124266666666666 9.882166666666667 1.09052 9.357366666666666 0.9881599999999999C8.799166666666666 0.8792866666666665 8.318566666666666 1.1633 8.030966666666666 1.59852C7.7904333333333335 1.9625133333333333 7.6966 2.26618 7.611066666666667 2.5431266666666668L7.608366666666666 2.5519066666666665C7.526133333333332 2.817973333333333 7.4452333333333325 3.07934 7.237266666666667 3.4476933333333335C6.895133333333334 4.053713333333333 6.615993333333333 4.36802 6.240833333333333 4.69694C6.046326666666666 4.867473333333333 5.84366 4.974753333333333 5.666666666666666 5.03686L5.666666666666666 14.149866666666664C6.190953333333333 14.161133333333334 6.752166666666666 14.168266666666668 7.333333333333333 14.168266666666668C8.896066666666666 14.168266666666668 10.214966666666665 14.117266666666666 11.084633333333333 14.071433333333333C11.938133333333333 14.026433333333333 12.754100000000001 13.5962 13.1998 12.814466666666664C13.621066666666666 12.075666666666665 14.160633333333333 10.9572 14.485833333333334 9.619766666666667C14.7904 8.367233333333333 14.9174 7.348799999999999 14.968999999999998 6.656493333333334C15.032466666666666 5.8043733333333325 14.340166666666665 5.166653333333333 13.545733333333333 5.166653333333333zM4.666666666666666 14.122666666666667L4.666666666666666 5.166653333333333L3.5348733333333335 5.166653333333333C2.506193333333333 5.166653333333333 1.591813333333333 5.90056 1.4747533333333334 6.9655C1.4003066666666666 7.642799999999999 1.3333333333333333 8.523499999999999 1.3333333333333333 9.5016C1.3333333333333333 10.559333333333333 1.4116666666666666 11.540700000000001 1.4928399999999997 12.274533333333332C1.6048399999999998 13.287066666666664 2.43944 14.026599999999998 3.4350066666666668 14.073566666666666C3.78952 14.0903 4.205413333333333 14.107633333333332 4.666666666666666 14.122666666666667z" fill="#00aeec"></path></svg>
                  <span>已赞</span>
                </div>
              </div>
              <div class="interaction-item__btn invisible delete" v-show="showDeleteIndex===item.commentId" @click="open(item.commentId)">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" width="16" height="16" style="width: 16px; height: 16px;"><path d="M5 3.25C5 2.3295266666666663 5.746193333333332 1.5833333333333333 6.666666666666666 1.5833333333333333L9.333333333333332 1.5833333333333333C10.253799999999998 1.5833333333333333 11 2.3295266666666663 11 3.25L11 3.833333333333333C11 4.109473333333333 10.776133333333334 4.333333333333333 10.5 4.333333333333333C10.223866666666666 4.333333333333333 10 4.109473333333333 10 3.833333333333333L10 3.25C10 2.8818133333333336 9.701533333333334 2.583333333333333 9.333333333333332 2.583333333333333L6.666666666666666 2.583333333333333C6.298473333333334 2.583333333333333 6 2.8818133333333336 6 3.25L6 3.833333333333333C6 4.109473333333333 5.77614 4.333333333333333 5.5 4.333333333333333C5.22386 4.333333333333333 5 4.109473333333333 5 3.833333333333333L5 3.25z" fill="currentColor"></path><path d="M1.3333333333333333 4.166666666666666C1.3333333333333333 3.8905266666666667 1.5571933333333332 3.6666666666666665 1.8333333333333333 3.6666666666666665L14.166666666666666 3.6666666666666665C14.4428 3.6666666666666665 14.666666666666666 3.8905266666666667 14.666666666666666 4.166666666666666C14.666666666666666 4.442806666666666 14.4428 4.666666666666666 14.166666666666666 4.666666666666666L1.8333333333333333 4.666666666666666C1.5571933333333332 4.666666666666666 1.3333333333333333 4.442806666666666 1.3333333333333333 4.166666666666666z" fill="currentColor"></path><path d="M3.1666666666666665 5.75C3.4428066666666663 5.75 3.6666666666666665 5.973859999999999 3.6666666666666665 6.25L3.6666666666666665 11.603066666666665C3.6666666666666665 12.442166666666667 4.28456 13.130766666666666 5.094706666666666 13.1985C5.950586666666666 13.270033333333332 6.993366666666667 13.333333333333332 8 13.333333333333332C9.006633333333333 13.333333333333332 10.049399999999999 13.270033333333332 10.905299999999999 13.1985C11.715433333333332 13.130766666666666 12.333333333333332 12.442166666666667 12.333333333333332 11.603066666666665L12.333333333333332 6.25C12.333333333333332 5.973859999999999 12.557199999999998 5.75 12.833333333333332 5.75C13.109466666666666 5.75 13.333333333333332 5.973859999999999 13.333333333333332 6.25L13.333333333333332 11.603066666666665C13.333333333333332 12.9358 12.342766666666666 14.081833333333332 10.9886 14.195C10.1174 14.267833333333332 9.044566666666666 14.333333333333332 8 14.333333333333332C6.955433333333333 14.333333333333332 5.882626666666667 14.267833333333332 5.011406666666666 14.195C3.6572266666666664 14.081833333333332 2.6666666666666665 12.9358 2.6666666666666665 11.603066666666665L2.6666666666666665 6.25C2.6666666666666665 5.973859999999999 2.8905266666666667 5.75 3.1666666666666665 5.75z" fill="currentColor"></path><path d="M6.333333333333333 7C6.60948 7 6.833333333333333 7.223866666666667 6.833333333333333 7.5L6.833333333333333 9.833333333333332C6.833333333333333 10.109466666666666 6.60948 10.333333333333332 6.333333333333333 10.333333333333332C6.057193333333332 10.333333333333332 5.833333333333333 10.109466666666666 5.833333333333333 9.833333333333332L5.833333333333333 7.5C5.833333333333333 7.223866666666667 6.057193333333332 7 6.333333333333333 7z" fill="currentColor"></path><path d="M9.666666666666666 7C9.942799999999998 7 10.166666666666666 7.223866666666667 10.166666666666666 7.5L10.166666666666666 9.833333333333332C10.166666666666666 10.109466666666666 9.942799999999998 10.333333333333332 9.666666666666666 10.333333333333332C9.390533333333334 10.333333333333332 9.166666666666666 10.109466666666666 9.166666666666666 9.833333333333332L9.166666666666666 7.5C9.166666666666666 7.223866666666667 9.390533333333334 7 9.666666666666666 7z" fill="currentColor"></path></svg> 
                <span>删除该通知</span>
              </div>
             </div>
             <div class="interaction-item__cover" @click="$router.push(`/videoDetail/${item.videoId}`)">              
              <div class="b-img" v-if="item.parentCommentId===-1">
                <picture class="b-img__inner">
                    <img :src="item.pictureUrl" >
                </picture>
            </div>
            <div class="bili-ellipsis" v-else>{{ item.parentCommentContent }}</div>
            </div>
          </div>
          <div class="interaction-item__panel" v-show="index===item.commentId">
            <div class="message-reply-box">
              <div class="message-reply-box__left">
                    <el-avatar :size="46" :src="userInfo.avatar"></el-avatar>
              </div>
              <div class="message-reply-box__center">
                <textarea placeholder="请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。" class="message-reply-box__input" v-model="commentContent"></textarea>
              </div>
              <div class="message-reply-box__right">
                <button class="message-reply-box__pub" @click="replyItem(item)">发表评论</button>
              </div>

            </div>
          </div>
          </div>
      </div>
      </div>
      </el-scrollbar>
</div>
  
<div class="message-box-shadow message-content__inner" v-show="!hasReply || !isLogin">
  <div class="at-layout">
    <div class="at-emtpy">
      <div class="message-empty">
        <img src="/notdata.png" alt="loading">
      </div>
    </div>
  </div>
</div>

</template>
<script setup>
import { ElAvatar,ElMessageBox,ElMessage } from 'element-plus';
import { getReplyMe,deleteReplyMe,replyReplyMe } from '@/api/replyMe';
import { onMounted,onUnmounted,ref } from 'vue';
import { useUserStore } from '@/store/useUserStore';
import { storeToRefs } from 'pinia';
import emitter from '@/utils/eventBus';
import { likeComment,cancelLikeComments } from '@/api/user';
const userStore = useUserStore();
//用户信息
const {userInfo,isLogin} = storeToRefs(userStore);
//是否有回复我的消息
const hasReply = ref(false);
//@消息列表
const replyMessageList=ref([]);
//回复内容
const commentContent=ref("");
//定位删除按钮的索引
const showDeleteIndex=ref("");
//点击恢复的索引号
const index = ref("");
//是否还有更多消息
const hasMore=ref(true);
//分页
const pageNum=ref(1);
const pageSize=ref(15);

//定位当前点击条目索引
function toggleReplyPanel(id){
 if (index.value === id) {
       index.value = "";
     } else {
       index.value = id;
     }
}
//获取回复我的消息
async function getReplyMessage(){
    if(!hasMore.value) return;
    const params={
        userId:userInfo.value.userId,
        pageNum: pageNum.value,
        pageSize: pageSize.value
    }
    try{
        const res=await getReplyMe(params)
        console.log(res);
        if (!res || !Array.isArray(res.commentReplyVOList)) {
            hasReply.value = false;
            return;
        }
        if(res.commentReplyVOList.length===0){
            return;
        }
        hasReply.value=true
        replyMessageList.value.push(...res.commentReplyVOList)
        res.commentReplyVOList.length < pageSize.value?hasMore.value=false:pageNum.value++;
    }catch(err){
        console.log(err)
    }
}

//对回复我的消息进行点赞/取消点赞
async function likeReplyMe(item){ 
  const data={
    userId:userInfo.value.userId,
    commentId:item.commentId
  }
  try{
    if(!item.isLiked){
      await likeComment(data)
      item.isLiked=true
    } 
    else{
      await cancelLikeComments(data)
      item.isLiked=false
    }
    ElMessage.success("操作成功！")
  }catch(err){
    console.log(err);
  }
}

//删除回复我的评论的通知
async function deleteNotify(id){
    try{
        const idx = replyMessageList.value.findIndex(v => v.commentId === id);
        if (idx > -1) replyMessageList.value.splice(idx, 1);
        await deleteReplyMe(id)
        hasReply.value = replyMessageList.value.length > 0;
        getReplyMessage()
    }catch(err){
        console.log(err);
    }
}

//删除评论弹窗
const  open =(id) => {
  ElMessageBox.confirm(
    '删除该条通知后将无法恢复，是否继续？',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
    }
  )
    .then(() => {
    deleteNotify(id)
    ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}

//对回复我的评论进行回复
async function replyItem(item){
    if(item===undefined) return;
    const data={
        videoId:item.videoId,
        publisherId:userInfo.value.userId,
        accepterId:item.publisherId,
        parentCommentId:item.parentCommentId,
        content:commentContent.value
    }
    try{
        await replyReplyMe(data)
        ElMessage.success("评论成功！")
        commentContent.value=""
        index.value=""
}
catch(err){
    console.log(err);
}
}

function handleReplyMessage(data){
  console.log(data);
}

function handleTimeShow(value) {
  const date = new Date(value)
  const now = new Date()
  // 判断是否为今天
  const isToday =date.getFullYear() === now.getFullYear() &&date.getMonth() === now.getMonth() &&date.getDate() === now.getDate()
  // 补零函数
  const pad = n => n.toString().padStart(2, '0')
  const hh = pad(date.getHours())
  const mm = pad(date.getMinutes())
  if (!isToday) {
    return value
  }
  return `今天 ${hh}:${mm}`
}

onMounted(() => {   
    getReplyMessage()
    emitter.on('replyMessage',handleReplyMessage)
})
onUnmounted(() => {
    emitter.off('replyMessage',handleReplyMessage)
})

</script>
<style scoped>
.message-content {
    box-sizing: border-box;
    position: relative;
    height: 100%;
    max-height: 83vh;
    padding: 3px 0 10px 10px;
}
.message-box-shadow {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
}
.interaction-item {
    position: relative;
    cursor: pointer;
    display: flex;
    gap:7px;
}
.interaction-item__left {
    padding-left: 16px;
    padding-top: 24px;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    position: relative;
}
.interaction-item__right {
    width: calc(100% - 76px);
    box-sizing: border-box;
    padding: 24px 16px 24px 0;
    border-bottom: 1px solid #e3e5e7;
    
}
.interaction-item__content {
    box-sizing: border-box;
    position: relative;
    padding-right: 76px;
}
.interaction-item__title {
    display: flex;
    font-size: 14px;
    line-height: 15px;
}
.interaction-item__uname {
    font-weight: 700;
    text-decoration: none;
    color: #18191c;
}
.interaction-item__action {
    margin-left: 8px;
    color: #61666d;
}
.interaction-item__msg {
    margin-top: 10px;
    font-size: 14px;
    line-height: 18px;
    color: #18191c;
}

.bili-ellipsis {
    text-overflow: ellipsis;
    word-break: break-word;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
.interaction-item__cover .b-img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    overflow: hidden;
}
.b-img__inner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit:cover
}
.interaction-item__metadata{
    margin-top: 10px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #9499a0;
}
.interaction-item__time {
    margin-right: 15px;
}
.reply {
    height: 100%;
}
.interaction-item__btn {
    cursor: pointer;
    margin-right: 14px;
    font-size: 14px;
    display: flex;
    align-items: center;
}
.interaction-item__btn .like-container{
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.interaction-item__btn:hover{
    color: #00aeec;
}
.interaction-item__btn .like-container.active {
    color: #00aeec;
}

/* 鼠标移入显示 */
/* .interaction-item__btn.invisible {
    opacity: 0;
    pointer-events: none;
} */

 .interaction-item__cover {
    position: absolute;
    right: 0;
    top: -7px;
    width: 60px;
    height: 60px;
    font-family: Microsoft YaHei;
}
.interaction-item__cover div {
    width: 100%;
    height: 100%;
    color: #9499a0;
    font-size: 14px;
    line-height: 15px;
}
.bili-ellipsis {
    text-overflow: ellipsis;
    word-break: break-word;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
}
.interaction-item__panel {
    margin-top: 20px;
    margin-left: -76px;
    width: calc(100% + 76px);
}
.message-reply-box {
    display: flex;
    height: 65px;
}
.message-reply-box__left {
    margin-left: 10px;
    padding-left: 16px;
    padding-right: 10px;
    flex-shrink: 0;
}
.message-reply-box__input:focus {
    border-color: #00aeec;
    background-color: #fff;
}
.message-reply-box__input {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    resize: none;
    outline: none;
    border: 1px solid #e3e5e7;
    background-color: #f1f2f3;
    overflow: auto;
    border-radius: 4px;
    color: #61666d;
    padding: 5px 10px;
    font-size: 12px;
}
.message-reply-box__center {
    flex: 1;
    overflow: hidden;
}
.message-reply-box__right {
    margin-left: 10px;
}
.message-reply-box__pub {
    width: 70px;
    height: 100%;
    flex-shrink: 0;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00aeec;
    cursor: pointer;
    color: #fff;
    outline: none;
    border: none;
}
@media screen and (min-width: 1920px) {
  .message-content{
  height: 86vh;
}
}

.message-content__inner {
    width: 100%;
}
.message-box-shadow {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 4px 0 rgba(121, 146, 185, 0.54);
}
.at, .at-layout{
    height: 100%;
}
.message-empty {
    width: 100%;
    height: 256px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.message-empty img {
    height: 100%;
}
img {
    overflow-clip-margin: content-box;
    overflow: clip;
}
</style>